<template>
    <div class="tabs">
        <!-- <el-tag :key="tag.name" v-for="tag in tags"
            :closable="tag.name !== 'home'" :disable-transitions="false"
            @close="handleClose(tag)" @click="changeMenu(tag)"
            :effect="$route.name === tag.name? 'dark' : 'plain'">
            {{tag.label}}
        </el-tag> -->
        <el-tabs type="card" v-model="activeName"  closable  @tab-remove="tabRemove" @tab-click="tabClick">
          <el-tab-pane
            :key="tag.name" v-for="tag in tags"
            :label="tag.label"
            :name="tag.name"
          >
          </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState({
      tags: state => state.tab.tabList,
      current: state => state.tab.currentMenu
    }),
    activeName: {
      get: function () {
        return this.$route.name
      },
      set: function () {
      }
    }
  },
  data () {
    return {
      // activeName: this.activeNameq
    }
  },
  methods: {
    ...mapMutations({
      close: 'closeTab'
    }),
    tabRemove (targetName) {
      // console.log('remove', targetName)
      if (targetName === 'home') {
        return
      }
      var item = this.tags.filter(item => item.name === targetName)[0]
      this.handleClose(item)
    },
    tabClick (tab, event) {
      // console.log('click:', tab, event)
      if (tab.name === 'home') {
        return
      }
      this.$router.push({ name: tab.name }) // 根据名字跳转
      // console.log(tab.name)
      var nowTab = {}
      nowTab.path = '/' + tab.name
      nowTab.name = tab.name
      nowTab.label = tab.label
      nowTab.plabel = ''
      nowTab.icon = ''

      // console.log(nowTab)
      this.$store.commit('selectMenu', nowTab)
    },

    // 关闭后，跳转到次
    handleClose (tag) {
      this.close(tag)
      // 删除tab后更新tablist到sessionStorage
      window.sessionStorage.setItem('tabList', JSON.stringify(this.$store.state.tab.tabList))
      if (tag.name === this.current.name) {
        this.changeMenu(this.tags[this.tags.length - 1])
      }
    },
    changeMenu (item) {
      if (item.name === 'home') {
        return
      }
      this.$router.push({ name: item.name }) // 根据名字跳转
      this.$store.commit('selectMenu', item)
    }
  },
  created () {
    if (JSON.parse(window.sessionStorage.getItem('tabList'))) {
      // console.log(JSON.parse(window.sessionStorage.getItem('tabList')))
      this.$store.state.tab.tabList = JSON.parse(window.sessionStorage.getItem('tabList'))
    }

    if (JSON.parse(window.sessionStorage.getItem('currentMenu'))) {
      this.$store.state.tab.currentMenu = JSON.parse(window.sessionStorage.getItem('currentMenu'))
    }
  }
}
</script>

<style lang="scss" scoped>
// tabs页设置第一个页面不可关闭
/deep/.el-tabs__nav .el-tabs__item:nth-child(1) span{
     display: none;
}
.tabs {
  z-index: 9;
  padding: 5px 15px 5px 15px;
  box-shadow:  0px 1px 0px 0px rgba(0, 0, 0, .12);
    .el-tag {
        margin-right: 5px;
        cursor: pointer;
    }
}
</style>
